<template>
  <div class="video-watermark-container">
    <div class="input-section">
      <input 
        v-model="shareUrl" 
        type="text" 
        class="url-input"
        placeholder="请输入视频分享地址"
      >
      <button @click="parseVideo" class="parse-btn">解析</button>
    </div>

    <div v-if="videoUrl" class="video-section">
      <video 
        :src="videoUrl"
        controls
        class="video-player"
      ></video>
      <button @click="downloadVideo" class="download-btn">
        下载视频
      </button>
    </div>
  </div>
</template>

<script>
import { postVideoRemoveWatermarkShare } from '@/js/api/video'
import { UIUtils } from '@/js/utils/uiUtils'

export default {
  name: 'VideoRemoveWater',
  data() {
    return {
      shareUrl: '',
      videoUrl: '',
    }
  },
  methods: {
    async parseVideo() {
      if (!this.shareUrl) {
        alert('请输入视频分享地址');
        return;
      }

      try {
        UIUtils.showLoading('正在解析视频...');

        const response = await postVideoRemoveWatermarkShare({
          url: this.shareUrl
        });

        UIUtils.hideLoading();

        if (response.code === 200 && response.data) {
          this.videoUrl = response.data.url;
          UIUtils.showToast('解析成功', 'success');
        } else {
          UIUtils.showToast('解析失败，请检查链接是否正确', 'error');
        }
      } catch (error) {
        UIUtils.hideLoading();
        console.error('解析出错:', error);
        UIUtils.showToast('解析出错，请稍后重试', 'error');
      }
    },
    async downloadVideo() {
      if (!this.videoUrl) {
        UIUtils.showToast('请先解析视频', 'error');
        return;
      }

      UIUtils.showLoading('正在下载视频...');
      const a = document.createElement('a');
      a.href = this.videoUrl;
      a.download = 'video.mp4';
      a.click();
      a.remove();
      UIUtils.hideLoading();
      UIUtils.showToast('下载完成', 'success');
    }
  }
}
</script>

<style scoped>
.video-watermark-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.input-section {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.url-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.parse-btn {
  padding: 8px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.parse-btn:hover {
  background-color: #66b1ff;
}

.video-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.video-player {
  width: 100%;
  max-width: 800px;
  height: 450px;
  background-color: #000;
}

.download-btn {
  padding: 8px 20px;
  background-color: #67c23a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.download-btn:hover {
  background-color: #85ce61;
}
</style>